<template>
  <div class="execution">
    <basic-container>
      <el-card class="filter-container" shadow="never">
        <div style="margin-top: 10px">
          <el-form :inline="true" size="small" label-width="140px">
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery.orderSn"></el-input>
            </el-form-item>

            <el-form-item label="支付渠道：">
              <el-select v-model="listQuery.payType" placeholder="请选择">
                <el-option
                  v-for="item in payTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="商家名称：">
              <el-select v-model="listQuery.storeId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.storeId"
                  :label="item.storeName"
                  :value="item.storeId"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="订单状态：">
              <el-select v-model="listQuery.status" placeholder="请选择">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.laber"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="时间：">
              <el-date-picker
                v-model="datetime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button @click="getList" type="primary" size="small"
                >查询结果</el-button
              >
              <el-button @click="handleResetSearch" size="small">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column
            label="订单编号"
            align="center"
            prop="orderSn"
          ></el-table-column>
          <el-table-column
            label="所属店铺"
            align="center"
            prop="storeName"
          ></el-table-column>
          <el-table-column
            label="下单人"
            align="center"
            prop="memberName"
          ></el-table-column>
          <el-table-column
            label="实付金额"
            align="center"
            prop="totalAmount"
          ></el-table-column>
          <el-table-column label="订单来源" align="center" prop="sourceType">
            <template slot-scope="scope">
              {{ scope.row.sourceType | sourceTypeFilters }}
            </template>
          </el-table-column>
          <el-table-column label="支付渠道" align="center" prop="payType">
            <template slot-scope="scope">
              {{ scope.row.payType | payTypeFilters }}
            </template>
          </el-table-column>

          <el-table-column label="礼品卡支付" align="center" prop="useGift">
            <template slot-scope="scope">
              {{ scope.row.useGift | useGiftFilters }}
            </template>
          </el-table-column>
          <el-table-column label="是否预售" align="center" prop="preStatus">
            <template slot-scope="scope">
              {{ scope.row.preStatus | useGiftFilters }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status | statusFilters }}
            </template>
          </el-table-column>
          <el-table-column
            label="下单时间"
            align="center"
            prop="createTime"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handleDetails(scope.$index, scope.row)"
                type="text"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import { getStore } from "@/api/rms/rmsstore";
import { getOrderList } from "@/api/oms/oder";

const defaultListQuery = {
  current: 1,
  size: 10,
  type: 1,
  orderSn: null, //订单编号
  storeId: null, //店铺Id
  memberId: null, //下单人
  payType: null, //支付方式：1->支付宝；2->微信
  status: null, //订单状态：1->待付款；2->待发货；3->已发货；4->已完成；5->已关闭；6->无效订单
  startTime: null,
  endTime: null,
};

export default {
  data() {
    return {
      payTypeOptions: [
        {
          id: 1,
          name: "支付宝",
        },
        {
          id: 2,
          name: "微信",
        },
      ],
      statusOptions: [
        {
          id: 1,
          laber: "待付款",
        },
        {
          id: 2,
          laber: "待发货",
        },
        {
          id: 3,
          laber: "已发货",
        },
        {
          id: 4,
          laber: "已完成",
        },
        {
          id: 5,
          laber: "已关闭",
        },
        {
          id: 6,
          laber: "无效订单",
        },
      ],
      options: [],
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: 0,
      datetime: [],
    };
  },
  created() {
    this.getList();
    this.getStoreList();
  },
  filters: {
    sourceTypeFilters(val) {
      if (val === 1) {
        return "APP";
      } else if (val === 2) {
        return "小程序";
      } else if (val === 3) {
        return "H5";
      }
    },
    payTypeFilters(val) {
      if (val === 1) {
        return "支付宝";
      } else if (val === 2) {
        return "微信";
      }
    },
    useGiftFilters(val) {
      if (val === 1) {
        return "是";
      } else if (val === 2) {
        return "否";
      }
    },
    statusFilters(val) {
      if (val === 1) {
        return "待付款";
      } else if (val === 2) {
        return "待发货";
      } else if (val === 3) {
        return "已发货";
      } else if (val === 4) {
        return "已完成";
      } else if (val === 5) {
        return "已关闭";
      } else if (val === 6) {
        return "无效订单";
      }
    },
  },
  methods: {
    getStoreList() {
      getStore({ status: this.listQuery.status }).then((res) => {
        this.options = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      this.listQuery.startTime = this.datetime[0];
      this.listQuery.endTime = this.datetime[1];
      getOrderList(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleDetails(index, row) {
      this.$router.push({
        path: "/oms/oder/details",
        query: { id: row.id },
      });
    },
  },
};
</script>
